<template>
    <div class="detection-config">
      <el-card shadow="hover">
        <div slot="header">
          <span>检测参数配置</span>
        </div>
        
        <el-form ref="configForm" :model="configForm" label-width="120px">
          <!-- 通用检测参数 -->
          <el-divider content-position="left">通用参数</el-divider>
          <el-form-item label="检测模式">
            <el-radio-group v-model="configForm.detectionMode">
              <el-radio-button label="fast">快速模式</el-radio-button>
              <el-radio-button label="standard">标准模式</el-radio-button>
              <el-radio-button label="precision">精准模式</el-radio-button>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="置信度阈值">
            <el-slider 
              v-model="configForm.confidenceThreshold" 
              :min="0.5" 
              :max="1" 
              :step="0.05"
              show-input>
            </el-slider>
          </el-form-item>
          
          <!-- 细胞类型参数 -->
          <el-divider content-position="left">细胞类型参数</el-divider>
          <el-form-item label="红细胞阈值">
            <el-input-number 
              v-model="configForm.rbcThreshold" 
              :min="0" 
              :max="500" 
              controls-position="right">
            </el-input-number>
            <span class="unit">个/μL</span>
          </el-form-item>
          
          <el-form-item label="白细胞阈值">
            <el-input-number 
              v-model="configForm.wbcThreshold" 
              :min="0" 
              :max="100" 
              controls-position="right">
            </el-input-number>
            <span class="unit">个/μL</span>
          </el-form-item>
          
          <el-form-item label="血小板阈值">
            <el-input-number 
              v-model="configForm.plateletThreshold" 
              :min="0" 
              :max="300" 
              controls-position="right">
            </el-input-number>
            <span class="unit">×10³/μL</span>
          </el-form-item>
          
          <!-- 高级设置 -->
          <!-- <el-collapse v-model="activeCollapse">
            <el-collapse-item title="高级设置" name="advanced">
              <el-form-item label="图像预处理">
                <el-checkbox-group v-model="configForm.preprocessMethods">
                  <el-checkbox label="denoise">去噪</el-checkbox>
                  <el-checkbox label="enhance">对比度增强</el-checkbox>
                  <el-checkbox label="normalize">归一化</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              
              <el-form-item label="算法模型">
                <el-select v-model="configForm.modelType" placeholder="请选择模型">
                  <el-option
                    v-for="item in modelOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-collapse-item>
          </el-collapse> -->
          
          <el-form-item class="action-buttons">
            <el-button type="primary" @click="saveConfig">保存配置</el-button>
            <el-button @click="resetConfig">恢复默认</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      
      <!-- 配置历史 -->
      <!-- <el-card shadow="hover" class="config-history">
        <div slot="header">
          <span>配置历史记录</span>
        </div>
        <el-table :data="configHistory" style="width: 100%">
          <el-table-column prop="date" label="修改时间" width="180"></el-table-column>
          <el-table-column prop="user" label="操作人" width="120"></el-table-column>
          <el-table-column prop="mode" label="检测模式"></el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="{ row }">
              <el-button type="text" @click="loadHistory(row)">加载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card> -->
    </div>
  </template>
  
  <script>
  export default {
    name: 'DetectionConfig',
    data() {
      return {
        activeCollapse: [],
        configForm: {
          detectionMode: 'standard',
          confidenceThreshold: 0.8,
          rbcThreshold: 350,
          wbcThreshold: 10,
          plateletThreshold: 150,
          preprocessMethods: ['denoise', 'enhance'],
          modelType: 'resnet50'
        },
        modelOptions: [
          { value: 'resnet50', label: 'ResNet50' },
          { value: 'yolov5', label: 'YOLOv5' },
          { value: 'efficientnet', label: 'EfficientNet' }
        ],
        configHistory: [
          { date: '2023-05-10 14:30', user: '张医生', mode: '标准模式' },
          { date: '2023-05-08 09:15', user: '李医生', mode: '快速模式' },
          { date: '2023-05-05 16:45', user: '王医生', mode: '精准模式' }
        ]
      };
    },
    methods: {
      saveConfig() {
        this.$message.success('配置保存成功');
        // 这里添加实际保存配置的逻辑
        console.log('保存配置:', this.configForm);
        
        // 添加到历史记录
        this.configHistory.unshift({
          date: new Date().toLocaleString(),
          user: '当前用户',
          mode: this.getModeLabel(this.configForm.detectionMode)
        });
      },
      resetConfig() {
        this.$confirm('确定要恢复默认配置吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.configForm = {
            detectionMode: 'standard',
            confidenceThreshold: 0.8,
            rbcThreshold: 350,
            wbcThreshold: 10,
            plateletThreshold: 150,
            preprocessMethods: ['denoise', 'enhance'],
            modelType: 'resnet50'
          };
          this.$message.success('已恢复默认配置');
        });
      },
      loadHistory(row) {
        this.$confirm(`确定要加载 ${row.date} 的配置吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          // 这里添加实际加载配置的逻辑
          this.$message.success(`已加载 ${row.mode} 配置`);
        });
      },
      getModeLabel(mode) {
        const map = {
          fast: '快速模式',
          standard: '标准模式',
          precision: '精准模式'
        };
        return map[mode] || mode;
      }
    }
  };
  </script>
  
  <style scoped lang="less">
  .detection-config {
    padding: 20px;
    
    .el-card {
      margin-bottom: 20px;
      
      /deep/ .el-card__header {
        font-weight: bold;
        background-color: #f5f7fa;
      }
    }
    
    .el-divider {
      margin: 20px 0;
    }
    
    .unit {
      margin-left: 10px;
      color: #909399;
      font-size: 14px;
    }
    
    .action-buttons {
      margin-top: 30px;
      text-align: center;
    }
    
    .config-history {
      margin-top: 30px;
    }
  }
  </style>